/*
 * @Author: weidewei
 * @Date: 2025-11-26 16:02:56
 * @LastEditors: weidewei
 * @LastEditTime: 2025-11-26 16:13:17
 * @Description:
 * @FilePath: \2025-front-face\vite-react-ts-template\src\pages\suspense.tsx
 */
import { Suspense } from "react";
import styled from 'styled-components';
const AsyncText = lazy(() => 
  new Promise(resolve => 
    setTimeout(() => resolve({ 
      default: () => "这是异步加载的内容！" 
    }), 2000)
  )
);
export default function suspenseComp() {
  return (
    <Wrapper>
      <div className="suspenseComp">
        <Suspense fallback={<div>加载中。。。。</div>}>
        {/* 这里面一定要是异步的组件 */}
          <AsyncText/>
        </Suspense>
      </div>
    </Wrapper>
  );
}
const Wrapper = styled.div`
  .suspenseComp {
    color: #000;
  }
`;
